<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="edge" />
<script type="text/javascript" src="resources/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="resources/easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="resources/easyui/locale/easyui-lang-zh_CN.js"></script>
<link rel="stylesheet" type="text/css" href="resources/easyui/themes/gray/easyui.css">
<link rel="stylesheet" type="text/css" href="resources/easyui/themes/icon.css">
<style type="text/css">
#header{overflow:hidden;height:50px;background:#95B8E7 ;line-height:50px;color:#fff;font-family:Verdana,微软雅黑,黑体}
.header{background: url(resources/images/logo.png) no-repeat left; width: 285px; height: 50px; float: left;background:#fff ;}
.top-bg {background-color:#f3f3f3;height: 80px;}
/*ie6提示*/
#ie6-warning{width:100%;position:absolute;top:0;left:0;background:#fae692;padding:5px 0;font-size:12px}
#ie6-warning p{width:960px;margin:0 auto;}
</style>
<title>主页</title>
<script type="text/javascript">
    var index_layout;
    $(function() {
        index_layout = $('#index_layout').layout({
            fit : true
        });
       initTree();
    });

    function initTree(){
    	$('#zkTree').tree({
    		checkbox: false,
    		url: "zk/queryZnode",
    		animate:true,
    		lines:true,
    		onContextMenu: function(e,node){
                e.preventDefault();  
                $(this).tree('select',node.target);  
                $('#mm').menu('show',{
                    left: e.pageX,  
                    top: e.pageY  
                });  
            },
    		onClick:function(node){
    			var tab = $('#zkTab').tabs('getSelected');
    			if(tab != null){
    				tab.title=node.text;
    				$('#zkTab').tabs('update', {
    					tab: tab,
    					options: {
    						title: node.text,
    						href: "zk/queryZnodeInfo?path="+encodeURI(encodeURI(node.attributes.path))  
    					}
    				});
    			}else {
    				$('#zkTab').tabs('add',{
    					id:0,
    		            title:node.text,  
    		            href: "zk/queryZnodeInfo?path="+encodeURI(encodeURI(node.attributes.path))
    	        	}); 
    			}
    			
    		},
    		onBeforeExpand:function(node,param){
    			if(node.attributes != null){
    				$('#zkTree').tree('options').url = "zk/queryZnode?path="+encodeURI(encodeURI(node.attributes.path)); 
    			}
    		}
    	});
    }
    function removeZkNode(){
     	 var node = $('#zkTree').tree('getSelected');  
          if (node){
          	if('/'==node.attributes.path || '/zookeeper'==node.attributes.path || '/zookeeper/quota'==node.attributes.path){
          		$.messager.alert('提示','不能删除此节点！');
          		return;
          	}
   	   	 $.messager.confirm('提示', '删除'+node.attributes.path+'下所有子节点！确认吗？', function(r){ 
   	    	    if (r){  
   	                if (node.attributes){  
   	                	 _path = node.attributes.path ;
   	                	 $.post("zk/deleteNode", {path: _path},
   	            				function(data){
   	            					$.messager.alert('提示', data);
   	            					$('#zkTab').tabs('close',0);
   	            					initTree();
   	            				}
   	                	);
   	                }  
   	    	    }  
   	        }); 
          }else {
          	$.messager.alert('提示', '请选择一个节点');
          }
   }  

   function collapse(){
       var node = $('#zkTree').tree('getSelected');  
       $('#zkTree').tree('collapse',node.target);  
   }  

   function expand(){  
       var node = $('#zkTree').tree('getSelected');  
       $('#zkTree').tree('expand',node.target);  
   }
   function addzkNode(){
      	var _path = "/";
      	var node = $('#zkTree').tree('getSelected');  
          if (node){  
              if (node.attributes){  
              	 _path = node.attributes.path ;
              }  
          }
          _nodeName = $('#zkNodeName').val();
          if(_path){
          	$.post("zk/createNode", { nodeName: _nodeName, path: _path},
      			function(data){
      				//alert("Data Loaded: " + data);
      				$.messager.alert('提示', data);
      				$('#w').window('close');
      				initTree();
      			}
          	);
          }else {
          	$.messager.alert('提示', '你必须选择一个配置');
          }
      }
   function sumbitForm(){
   	$('#ff').form({
   		success:function(data){
   			$.messager.alert('提示', data);
   		}
   	});
   	$('#ff').submit();
   	
   }
</script>
</head>
<body>
    <div id="index_layout">
        <div data-options="region:'north',border:false" style="overflow:hidden; height: 40px;">
            <div class="top-bg">
	        	<span style="font-size: 30px;">后台管理系统</span>
	        	<span style="float:right; padding-right:20px; padding-top:15px;" class="head">欢迎 ${sys_user.realName}|| 
	        		<a href="${ctxPath}/index?method=logout" id="loginOut">安全退出</a>
	        	</span>
        	</div>
        </div>
        <div data-options="region:'west',split:true" title="菜单" style="width: 160px; overflow: hidden;overflow-y:auto; padding:0px">
            <div class="well well-small" style="padding: 5px 5px 5px 5px;">
                <ul id="zkTree" class="easyui-tree"></ul> 
            </div>
        </div>
        <div data-options="region:'center'" style="overflow: hidden;">
            <div class="easyui-tabs" id="zkTab" data-options="tools:'#tab-tools',toolPosition:'left'">  
			    <div title="Home" style="padding:10px;">  
			        zookeeper-ui! 
			    </div>  
			</div>
			<div id="tab-tools">  
	        	<a href="javascript:void(0)" class="easyui-linkbutton" data-options="plain:true,iconCls:'icon-add'" onclick="javascript:$('#w').window('open');"></a>  
	        	<a href="javascript:void(0)" class="easyui-linkbutton" data-options="plain:true,iconCls:'icon-remove'" onclick="removeZkNode()"></a>  
	    	</div>
        </div>
        <div data-options="region:'south',border:false" style="height: 30px;line-height:30px; overflow: hidden;text-align: center;background-color: #eee" >Copyright © 2017 power by <a href="http://www.20140827.net/" target="_blank">木木工作室</a></div>
    </div>
    <!--[if lte IE 7]>
    <div id="ie6-warning"><p>您正在使用 低版本浏览器，在本页面可能会导致部分功能无法使用。建议您升级到 <a href="http://www.microsoft.com/china/windows/internet-explorer/" target="_blank">Internet Explorer 8</a> 或以下浏览器：
    <a href="http://www.mozillaonline.com/" target="_blank">Firefox</a> / <a href="http://www.google.com/chrome/?hl=zh-CN" target="_blank">Chrome</a> / <a href="http://www.apple.com.cn/safari/" target="_blank">Safari</a> / <a href="http://www.operachina.com/" target="_blank">Opera</a></p></div>
    <![endif]-->
    
    <!-- add -->
    <div id="w" class="easyui-window" title="添加节点" data-options="iconCls:'icon-add',modal:true,closed:true,maximizable:false" style="width:500px;padding:10px;">  
        <div style="text-align:center;padding:5px">
        	输入节点名称:
       		<input id="zkNodeName" class="easyui-validatebox" type="text" data-options="required:true,tipPosition:'right'"></input> 
        </div>
        <div style="text-align:center;padding:5px">
        	<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-save'" onclick="addzkNode()">保存</a>
        	<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-cancel'" onclick="$('#w').window('close');" >取消</a>  
        </div>
    </div>  
</body>
</html>